<template>
  <div style="margin-top:20px;background-color: #ffffff;padding: 20px;">
    <p style="color:#828282;">共搜索到 {{Object.keys(pageData).length>0 && pageData.total ? pageData.total: 0   }} 个符合符合条件的数据</p>
    <custom-table
        ref="table"
        rowKey="id"
        :showAlert="false"
        :showSelection="false"
        :loading="loading"
        :columns="columns"
        :dataSource="pageData"
        @change="onTableChange"
      >
      <template slot="action" slot-scope="text, record">
        <a-button @click="handleDetails(record)" type="link">详情</a-button>
      </template>
    </custom-table>
  </div>
</template>

<script>
import * as homeApi from '@/api/smuggle/home.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  components: {
    CustomTable
  },
  props: {
    value: {
      type: String,
      default: null,
      required: false
    },
    sourceType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
     loading: false,
     columns: [
        {
          title: '疑似走私账号',
          dataIndex: 'userName',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'userName' },
        },
        {
          title: '数据来源',
          dataIndex: 'userSourceType',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'userSourceType' },
        },
        {
          title: '疑似走私发布数',
          dataIndex: 'infoNum',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'infoNum' },
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'updateTime' },
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        }
     ],
     form: {},
     pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
     pageData: {}
    }
  },
  created() {},
  mounted() {},
  // watch: {
  //   value: {
  //     immediate: true,
  //     handler(val) {
  //       console.log(val)
  //       this.onQuery()
  //     }
  //   }
  // },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = {currentPage: 'pageNo'}
      let paginations= Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations);
      this.refreshTable();
    },
    refreshTable() {
      let form = Object.assign({}, {sourceTypeList: this.sourceType, userName: this.value}, this.pageFilter)
      this.loading = true
      homeApi.getSmuUser(form).then((res) => {
        if (res.success) {
          this.pageData = res.result
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(e=>{
        this.loading = false
        this.$message.warn("请求失败！");
      })
    },
    handleDetails(record) {
      this.$router.push({
        path: '/smuggleInformation/rankDetail',
        query: {
          id: record.id,
          type: 1
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cloud-wrap {
  display: flex;
  align-items: flex-start;
  text-align: left;
  .cloud-box {
    flex: 0 0 55%;
    width: 55%;
    height: 500px;
  }
  .cloud-table {
    border: 1px solid #ccc;
    .title {
      font-weight: bold;
      font-size: 16px;
      width: 100%;
      background-color: #fafafa;
      padding: 12px;
      border-bottom: 1px solid #ccc;
    }
    .ant-col {
      display: flex;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
      .index,
      .name {
        padding: 12px;
      }
      .index {
        border-right: 1px solid #ccc;
        flex: 0 0 80px;
        background-color: #fafafa;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:nth-of-type(2n) {
        border-left: 0;
      }
    }
  }
}
.platform_smuggle_num {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding-top: 20px;
  margin: 20px 0;
  /deep/.ant-card {
    min-width: 220px;
    max-width: 220px;
    padding: 10px 10px 0 10px;
    margin: 0 auto 20px;
  }
  /deep/.ant-card-cover {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 14px;
      font-weight: 600;
    }
    h3 {
      font-size: 18px;
    }
    .cover-right {
      position: relative;
      text-align: center;
      .anticon {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  /deep/.ant-card-body {
    padding: 6px;
    border-top: 1px solid #e8e8e8;
    .ant-card-meta-description {
      color: #666;
    }
  }
}
</style>
